<template>
	<view class="big">
		<view class="nav-bottom-bg">
			<u-navbar title-size="34"  back-icon-color="#ffffff" :border-bottom="false" :customBack="goBackLogin" :background="bgColor" placeholder>
			</u-navbar>
			<view class="container position-relative">
				<div class="padding-80">
					<view title="title" class="text-1EF7FE text-left family-cn font-weight-600 fz-48">注册POSTRINGS+</view>
				</div>
				<view class="item">
					<u-input type="number" :custom-style="customStyle" maxlength="11" class="input-box" shape="circle" style="padding: 6px 18px;"
						v-model="param.mobile" placeholder="手机号" placeholder-style="color:#999BA8"></u-input>
				</view>
				<view class="item">
					<u-input type="number" :custom-style="customStyle" maxlength="6" class="input-box" s  shape="circle" style="padding: 6px 18px;"
						v-model="param.verification_code" placeholder="验证码" placeholder-style="color:#999BA8">
					</u-input>
					<view class="code-box">
						<u-verification-code seconds="60" @end="end" @start="start" ref="uCode" changeText="Xs获取"
							@change="codeChange"></u-verification-code>
						<span class="text-F5F6F9 fz-28" @tap="getCode">{{tips}}</span>	
					</view>
				</view>

				<view class="item">
					<u-input :type="type" :custom-style="customStyle" :password="!isEye" style="padding: 6px 18px;" shape="circle" class="input-box" :password-icon="false" 
						v-model="param.password" placeholder="设置登录密码" placeholder-style="color:#999BA8">
					</u-input>
					<image src="/static/login/login_eye.png" class="eye-img ml-1" mode="" @tap="isEye= false" v-show="isEye">
					</image>
					<image src="/static/login/login_eyeClose.png" class="eye-img ml-1" mode="" @tap="isEye= true"
						v-show="!isEye"></image>
				</view>

				<view class="item">
					<u-input :type="confirType" :custom-style="customStyle" :password="!isEye_confirmation" style="padding: 6px 18px;" class="input-box"
						shape="circle" v-model="param.password_confirmation" placeholder="再次确认密码" :password-icon="false" 
						placeholder-style="color:#999BA8">
					</u-input>
					<image src="/static/login/login_eye.png" class="eye-img ml-1" mode="" @tap="isEye_confirmation= false" v-show="isEye_confirmation">
					</image>
					<image src="/static/login/login_eyeClose.png" class="eye-img ml-1" mode="" @tap="isEye_confirmation= true"
						v-show="!isEye_confirmation"></image>
				</view>
				<view class="item pb-2">
					<u-input type="text" :custom-style="customStyle" class="input-box" style="padding: 6px 18px;" shape="circle"
						v-model="param.invitation_code" placeholder="邀请码(选填)" placeholder-style="color:#999BA8"></u-input>
				</view>
				<u-button type="default" :loading="loading" hover-class="none" shape="circle" class="yellow-bg family-sc fz-36 mt-2rem" @tap="formSubmit">
					立即注册
				</u-button>
				<!-- #ifdef H5 -->
				<view class="logoflex fz-30">
					<view class="text-CCCDD5" v-if="isAndroid">已有账号？<text class="text-00D7FF" @tap="toDown">点击下载</text></view>
					<view class="text-CCCDD5" v-else>已有账号？<text class="text-00D7FF" @tap="goBackLogin">去登录</text></view>
				</view>
				<!-- #endif -->
			</view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker.js'
	export default {
		data() {
			return {
				param: {
					mobile: '',
					password: '',
					password_confirmation: '',
					verification_code: '',
					invitation_code: ''
				},
				loading:false,
				isEye: false,
				isEye_confirmation: false,
				isAndroid: true,
				tips: '获取验证码',
				disabled: true,
				bgColor: {
					background: 'rgba(255,255,255,0)'
				},
				customStyle:{
					color:'rgba(255,255,255,0.85)',
					fontSize:'30upx'
				},
			}
		},
		onLoad(options) {
			this.param.invitation_code = options.code || ''
			var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.isWeChat = true
			}
			var u = navigator.userAgent;
			this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		},
		computed: {
			type() {
				return !this.isEye ? 'password' : 'text'
			},
			confirType(){
				return !this.isEye_confirmation ? 'password' : 'text'
			}
		},
		methods: {
			goBack(){
				let pages = getCurrentPages(); //当前页
				let beforePage = pages[pages.length - 3]; //上个页面
				if (beforePage == undefined) {
					return uni.switchTab({
						url:'/pages/tabBars/home'
					})
				}
				uni.navigateBack({
					delta: 2
				})
			},
			goBackLogin(){
				let pages = getCurrentPages(); //当前页
				let beforePage = pages[pages.length - 2]; //上个页面
				if (beforePage == undefined) {
					return uni.redirectTo({
						url:'/pages/login/login'
					})
				}
				uni.navigateBack({
					delta: 1
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					//进行表单检查
					let checkRes = uni.$u.test.mobile(this.param.mobile)
					if (checkRes) {
						this.$store.dispatch('auth/smsSend', {
							mobile: this.param.mobile,
							type:1
						}).then(res => {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}).catch(error => {
							uni.$u.toast(error.data.message)
						})
					} else {
						uni.$u.toast('请输入正确的手机号')
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			start(){},
			comback() {
				let pages = getCurrentPages(); //当前页
				let beforePage = pages[pages.length - 2]; //上个页面
				if (beforePage == undefined) {
					return uni.reLaunch({
						url: '/pages/login/login'
					})
				}
				uni.navigateBack({
					delta: 1
				})
			},
			toLogin() {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			//下载
			toDown() {
				uni.reLaunch({
					url: '/pages/login/download'
				})
			},
			formSubmit() {
				this.rule = [{
						name: "mobile",
						checkType: "phoneno",
						errorMsg: "请输入正确的手机号"
					},
					{
						name: "verification_code",
						checkType: "string",
						checkRule: "6,6",
						errorMsg: "验证码必须6位"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "6,18",
						errorMsg: "请输入6-18位的密码"
					},
					{
						name: "password_confirmation",
						checkType: "string",
						checkRule: "6,18",
						errorMsg: "请输入6-18位的重复密码"
					}
				]
				//进行表单检查
				let checkRes = graceChecker.check(this.param, this.rule)
				if (checkRes) {
					if (this.param.password != this.param.password_confirmation) {
						return uni.$u.toast('两次密码输入不一致')
					}
					this.register()
				} else {
					uni.$u.toast(graceChecker.error)
				}
			},
			//注册接口
			register() {
				this.loading = true
				this.$store.dispatch('auth/register', this.param).then(res => {
					this.loading = false
					uni.$u.toast('注册成功')
					this.$store.dispatch('auth/user').then(res => {
						this.tui.getWallet()
						//如果账号没有设置昵称和头像则跳转完善信息页面
						if (!res.data.has_password) {
							uni.reLaunch({
								url: '/pages/setting/setPassword'
							})
							//如果都设置了则跳回上一页
						} else if (!res.data.avatar) {
							uni.reLaunch({
								url: '/pages/setting/perfectInfo'
							})
							//如果账号没有设置密码则跳转设置密码页面
						} else {
							this.goBack()
						}
					})
				}).catch(error=>{
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.big{
		width: 100%;
		height: 100vh;	
		// background: url('https://postrings.oss-accelerate.aliyuncs.com/avatar/20230327/AhnbejjVi6JS5PM9labFssmE4uX9jWSvZXQBBV18.gif') no-repeat !important;
		background: url('https://postrings.oss-accelerate.aliyuncs.com/works/3/2023/04/13/10/1681351309363.gif') no-repeat center bottom !important;
		background-size: cover !important;
		background-position:bottom;
	}
	.nav-bottom-bg {
		width: 100%;
		height: 100vh;
		background:rgba(13,24,68,0.7); 
	}
	
	.container {
		width: 690upx;
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		text-align: center;
		.padding-80{
			padding-top: 80upx;
			padding-bottom: 40upx;
		}
		.info {
			color: #2C2C2C;
			font-size: 40upx;
		}

		.item {
			width: 100%;
			margin-top: 40upx;
			position: relative;
			.input-box {
				width: 100%;
				height: 98upx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: left;
				background: rgba(204, 205, 213, 0.2);
				border-radius: 49upx;
				padding: 0upx 30upx !important;
				input {
					height: 98upx;
					width: calc(100% - 180upx) !important;
					font-size: 32upx;
					color: #2c2c2c;
				}
			}
	
			.code-box {
				position: absolute;
				right: 36upx;
				top: 50%;
				transform: translateY(-50%);
				color: #292940;
			}
			
			.eye-img {
				position: absolute;
				right: 36upx;
				top: 50%;
				transform: translateY(-50%);
				width: 36upx;
				height: 36upx;
			}
			
		}

		button {
			width: 100%;
			height: 98upx;
			border-radius: 49upx;
			line-height: 98upx;
			font-size: 32upx;
			color: #FFFFFF;
			margin-top: 50upx;
			margin-bottom: 20upx;
		}

		uni-button:after {
			border: none !important;
		}

		.logoflex {
			width: 100%;
			padding-top: 79upx;
		}


	}
</style>
